<template>
  <el-tabs type="border-card" style="height: 400px">
    <el-tab-pane label="GIS能耗地图">
      <div id="gis-energy-map" ref="gis-energy-map"></div>
      <div id="left-banner" style="text-align: left;max-height: 300px;overflow-y: auto;overflow-x: hidden;">
        <div style="margin-top:5px;margin-bottom: 10px;margin-left: 5px;color: black;height: 30px;border-bottom: 3px solid rgb(163,195,255);">
          <div v-on:click="selectDateType('year')" :style="selectedTimeType==='year'?'border-bottom: 2px solid rgb(51,133,255);color: rgb(51,133,255);':''" style="cursor:pointer;display: inline-block;line-height: 30px;vertical-align: center;font-size: 14px;">本年</div>
          <div v-on:click="selectDateType('month')" :style="selectedTimeType==='month'?'border-bottom: 2px solid rgb(51,133,255);color: rgb(51,133,255);':''"  style="cursor:pointer;margin-left: 15px;display: inline-block;line-height: 30px;vertical-align: center;color: rgb(51, 51, 51);font-size: 14px;">本月</div>
          <div v-on:click="selectDateType('day')" :style="selectedTimeType==='day'?'border-bottom: 2px solid rgb(51,133,255);color: rgb(51,133,255);':''"  style="cursor:pointer;margin-left: 15px;display: inline-block;line-height: 30px;vertical-align: center;color: rgb(51, 51, 51);font-size: 14px;">今日</div>
        </div>
        <div style="font-size: 14px;color:rgb(102,102,102);cursor:pointer;border-bottom: 1px solid rgb(228, 230, 231);width: 250px;margin-left: 5px;margin-top:2px;height: 35px;text-align: center;line-height: 35px;">
          <div style="float: left;height: 100%;width: 30px;font-weight: bold;">排名</div>
          <div style="float: left;height: 100%;width: 105px;margin-left: 5px;font-weight: bold;">名字</div>
          <div style="float: left;height: 100%;width: 100px;margin-left: 5px;border-radius: 40px;font-weight: bold;">耗能</div>
        </div>
        <div style="font-size: 14px;color:rgb(102,102,102);cursor:pointer;border-bottom: 1px solid rgb(228, 230, 231);width: 250px;margin-left: 5px;margin-top:2px;height: 35px;text-align: center;line-height: 35px;" v-for="(item, index) in list" :key="item.id">
          <div style="float: left;height: 100%;width: 30px;font-weight: bold;" :style="'color:' + item.color">{{index + 1}}</div>
          <div style="float: left;height: 100%;width: 105px;margin-left: 5px;color: rgb(51,133,255);">{{item.name}}</div>
          <div v-if="selectedEnergy == null || selectedEnergy.showType ==='stand'" style="float: left;height: 100%;width: 100px;margin-left: 5px;border-radius: 40px;">{{$doubleLab(item.use.increaseStandValue)}} kgce</div>
          <div v-if="selectedEnergy != null && selectedEnergy.showType ==='cash'" style="float: left;height: 100%;width: 100px;margin-left: 5px;border-radius: 40px;">{{$doubleLab(item.use.increaseCashValue)}} 元</div>
          <div v-if="selectedEnergy != null && selectedEnergy.showType ==='real'" style="float: left;height: 100%;width: 100px;margin-left: 5px;border-radius: 40px;">{{$doubleLab(item.use.increaseRealValue)}} {{selectedEnergy.energy.unite}}</div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  props: ['selectedEnergyId', 'selectedEnergy'],
  watch: {
    selectedEnergyId(n, o) {
      if (n !== o) {
        this.loadData()
      }
    }
  },
  data() {
    return {
      selectedTimeType: 'day',
      center: [],
      zoom: 17.2,
      list: [],
      halfScreen: {
        enable: false,
        width: null,
        height: null,
        left: null,
        top: null
      }
    }
  },
  name: "map-view",
  mounted() {
    this.loadData()
    this.toHalfScreen();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    selectDateType: function (dateType) {
      this.selectedTimeType = dateType
      this.loadData();
    },
    loadData: function () {
      const energyId = this.selectedEnergy.energy.id;
      const data = {
        content: {
          dateType: this.selectedTimeType,
          energyId: (energyId && energyId !== -1  ? energyId: null)
        }
      }
      this.$axios({url:"/ems/client/index/map/subject/list", data: data}).then((content) => {
        if (content.list && content.list.length > 0) {
          this.list = content.list
          this.center.push(content.list[0].location.lng)
          this.center.push(content.list[0].location.lat)
          if (content.list[0].location.zoom) {
            this.zoom = content.list[0].location.zoom
          }
          this.initAMap();
        }
      })
    },
    toHalfScreen: function () {
      this.halfScreen.enable = !this.halfScreen.enable;
      const h = window.innerHeight;
      const w = window.innerWidth;
      this.halfScreen.width = w/2 + 'px';
      this.halfScreen.height = h/2 + 'px';
      this.halfScreen.top = h/4 + 'px';
      this.halfScreen.left = w/4 + 'px';
      if (this.halfScreen.enable) {
        this.$refs["gis-energy-map"].className = 'half-screen';
      }else {
        this.$refs["gis-energy-map"].className = '';
      }
    },
    initAMap() {
      const center = this.center;
      window._AMapSecurityConfig = {
        securityJsCode: "81e4e1670dbfedf9aae96db38a432f7b",
      };
      AMapLoader.load({
        key: "1cfc6308190df66631827aa53b629e06",
        version: "2.0",
        plugins: ["AMap.Scale", "AMap.Buildings", "AMap.Marker"],
      })
          .then((AMap) => {
            this.map = new AMap.Map("gis-energy-map", {
              zoom: this.zoom,
              pitch:50,
              showBuildingBlock: true,
              showIndoorMap:true,
              showLabel:true,
              viewMode:'3D',
              center: center,
              mapStyle: "amap://styles/fresh",
              terrain: true
            });
          })
          .catch((e) => {
            console.log(e);
          });
    },
  },
};
</script>
<style scoped>
#gis-energy-map {
  width: 100%;
  height: 340px;
}
#left-banner {
  position: relative;
  float: left;
  width: 270px;
  background-color: white;
  top: -330px;
  z-index: 9999;
  color: white;
  border-start-end-radius: 15px;
}
</style>
